<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美滋滋饮品公司管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./css/x-admin.css" media="all">
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>会员管理</cite></a>
			<a><cite>权限规则</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<form id="form_product" class="layui-form x-center"
			onsubmit="return false" style="width: 95%">
			<div class="layui-form-pane" style="margin-top: 15px;">
				<div class="layui-form-item">
					<div class="layui-input-inline" style="width: 120px">
						<select name="productCategoryId">
							<option value="">请选择系列</option>
							<option value="1">奶类饮品</option>
							<option value="2">碳酸系列</option>
							<option value="3">矿泉水系列</option>
							<option value="4">咖啡系列</option>
						</select>
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<input type="text" name="productId" placeholder="产品编号"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<input type="text" name="productName" placeholder="产品名称"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 120px">
						<select name="flavor">
							<option value="">请选择口味</option>
							<option value="原味">原味</option>
							<option value="樱桃味">樱桃味</option>
							<option value="苹果味">苹果味</option>
							<option value="菠萝味">菠萝味</option>
						</select>
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<input type="text" name="beginmarketPrice" placeholder="起始价格"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<input type="text" name="endmarketPrice" placeholder="结束价格"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 120px">
						<select name="brand">
							<option value="">请选择品牌</option>
							<option value="美滋滋">美滋滋</option>
						</select>
					</div>
					<div class="layui-input-inline" style="width: 120px">
						<select name="isDistribution">
							<option value="">是否配送</option>
							<option value="是">是</option>
							<option value="否">否</option>
						</select>
					</div>
					<div class="layui-input-inline" style="width: 140px">
						<select name="isCashPayment">
							<option value="">是否现金支付</option>
							<option value="是">是</option>
							<option value="否">否</option>
						</select>
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<button class="layui-btn" onclick="myPagers()" lay-filter="*">
							<i class="layui-icon">&#xe608;</i>查询
						</button>
					</div>
				</div>
			</div>
		</form>
		<xblock>
		<button class="layui-btn layui-btn-danger" onclick="delAll()">
			<i class="layui-icon">&#xe640;</i>批量删除
		</button>
		<button class="layui-btn"
			onclick="admin_add('添加产品','products_add.html','600','500')">
			<i class="layui-icon">&#xe608;</i>添加
		</button>
		<span class="x-right" style="line-height: 40px">共有数据：88 条</span></xblock>
		<table class="layui-table">
			<thead>
				<tr>
					<th><input onclick="selAll(this)" type="checkbox" name="" value=""></th>
					<th>ID</th>
					<th>产品编号</th>
					<th>产品名称</th>
					<th>产品口味</th>
					<th>品牌</th>
					<th>是否配送</th>
					<th>是否现金支付</th>
					<th>产品图片</th>
					<th>产品分类</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="table_product">

			</tbody>
		</table>
		<div id="pagers"></div>
	</div>
	<script src="./lib/layui/layui.js" charset="utf-8"></script>
	<script src="./js/x-layui.js" charset="utf-8"></script>
	<script>
		var $ = null;
		var layer = null;
		var laypage = null;

		layui.use([ 'laypage','form', 'element', 'layer' ],function() {
			$ = layui.jquery; // jquery
			layer = layui.layer; // 弹出层
			laypage = layui.laypage; // 分页
	
			// jquery单位页面加载事件,也就是说当页面加载完毕之后自动触发其中的内容
			$(function () {
				myPagers();
			});
		
		})
		
		function myPagers() {
			$.post("../adminProduct?reqName=getAllProducts",$("#form_product").serialize(),function(res){ // res是服务器返回的数据,注意事项字符串的类型
				laypage.render({
					elem: 'pagers' , // 注意，这里的 test1 是 ID，不用加 # 号
					count: parseInt(res) , // 数据总数，从服务端得到
					limit: 3 , // 每页分3条数据
					jump: function(obj, first){ // 点击分页条时触发
					    // obj包含了当前分页的所有参数，比如：
					    console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
					    console.log(obj.limit); // 得到每页显示的条数
					   	
					    selProducts(obj.curr, obj.limit);
					  }
				});
			},"json");
		}
		
		function selProducts(page, size) {
			$("#table_product").html(""); // 在查询之前吧所有数据清空
			// 1.请求地址 2.携带参数 3.回调函数(会在服务器返回数据之后触发) 4.转换类型
			$.post("../adminProduct?reqName=getProducts",
					//$.param()序列化对象,返回字符串
					$.param({"page":page})+'&'+$.param({"size":size})+'&'+$("#form_product").serialize()
			,function(res){
				for (var i=0;i<res.length;i++) { // 遍历数组
					// 向id为table_product的tobody中添加tr
					// ``是模板字符串,好处是在中间不需要考虑单引号和双引号冲突的问题
					$("#table_product").append(`
							<tr>
							<td><input type="checkbox" value="1" name=""></td>
							<th>${res[i].productId}</th>
							<th>${i+1}</th>
							<th>${res[i].productName}</th>
							<th>${res[i].flavor}</th>
							<th>${res[i].brand}</th>
							<th>${res[i].isDistribution}</th>
							<th>${res[i].isCashPayment}</th>
							<th><img src="../${res[i].productImg}" /></th>
							<th>${res[i].productCategoryName}</th>
							<td class="td-manage"><a title="编辑" href="javascript:;"
								onclick="rule_edit('编辑','products_edit.html',${res[i].productId},'','510')"
								class="ml-5" style="text-decoration: none"> <i
									class="layui-icon">&#xe642;</i>
							</a> <a title="删除" href="javascript:;" onclick="rule_del(this,${res[i].productId})"
								style="text-decoration: none"> <i class="layui-icon">&#xe640;</i>
							</a></td>
						</tr>
					`);
				}
			},"json");
		}
		
		 /*添加*/
        function admin_add(title,url,w,h){
            x_admin_show(title,url,w,h);
        }
		
		
		//以上模块根据需要引入

			//设置全选全不选
             function selAll(obj){
            	var checked=$(obj).prop("checked");//得到表头中的复选框是否被选中
            	$("#table_product input:checkbox").prop("checked",checked);
             }
            //批量删除提交
             function delAll () {
            	var chks=$("#table_product input:checkbox:checked");//获得所有被选中的复选框 产生的是个数组
                if (chks.length==0) {
					alert("勾选有效的复选框");
					return false;
				}
            	layer.confirm('确认要删除吗？',function(index){
            		var ids=[];
            		for (var i = 0; i < chks.length; i++) {
						var abc=$(chks[i]).parent().next().html();
						ids.push(abc);
					}
            		$.post("../adminProduct?reqName=delProductByIds",{
            			ids: ids.join(",")//将数组变成字符串
            		},function(res){
            			if (res.success) {
            				 //捉到所有被选中的，发异步进行删除
                            layer.msg('删除成功', {icon: 1});
                            myPagers();
						} else {
							//捉到所有被选中的，发异步进行删除
		                    layer.msg('删除失败', {icon: 1});
						}
            		},"json");
                    
                });
             }

		//-编辑
		function rule_edit(title, url, id, w, h) {
			sessionStorage.setItem("proId", id); // 把id存到浏览器会话中
			x_admin_show(title, url, w, h);
		}

		/*删除*/
		function rule_del(obj, id) {
			layer.confirm('确认要删除吗？', function(index) {
				//发异步删除数据
				$.post("../adminProduct?reqName=deleteProduct",{
					productId: id
				},function(res){ // res是服务器返回的数据
					if (res.success) { // 删除成功 
						layer.msg(res.success, {icon:1,time:2000});
						$(obj).parents("tr").remove(); // 删除点击的所在行
						myPagers(); // 重新调用查询所有的方法
					} else { // 删除失败
						layer.msg(res.success, {icon:1,time:2000});
					}
				},"json");
			});
		}
	</script>

</body>
</html>